<!-- 需要显示链接页面的顶部组件 -->
<template>
  <header class="navHeader">
    <div style="display: flex; align-items: center;">
      <svg @click="goBackHandler" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="24" height="24" style="" filter="none">
        <g>
        <path d="M9.476 16.257c-0.103-0.435 0.015-0.912 0.355-1.251l10.685-10.685c0.521-0.521 1.365-0.521 1.886 0s0.521 1.365 0 1.886l-9.745 9.745 9.746 9.746c0.521 0.521 0.521 1.365 0 1.886s-1.365 0.521-1.886 0l-10.685-10.685c-0.171-0.171-0.296-0.388-0.354-0.632l-0.002-0.009z" fill="rgba(255,255,255,1)"></path>
        </g>
      </svg>
      <div class="pageTitle">{{ pageTitle }}</div>
    </div>

    <van-dropdown-menu v-if="lineActions.length > 1">
      <!-- style="top: 50px;" -->
      <van-dropdown-item v-model="selectValue" :options="lineActions" @change="changeLinkHandler" />
    </van-dropdown-menu>

    <div style="width: 100px;"></div>
  </header>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

const goBackHandler = () => {
  router.back()
}

const props = defineProps({
  pageTitle: String,
  lineActions: Array,
  selectedLianJie: Object,
})
const selectValue = ref(0);

/**
 * 改变链接功能
 */
const emit = defineEmits(['changeLink'])
const changeLinkHandler = (index) => {
  emit('changeLink', props.lineActions[index])
}
</script>

<style lang="scss" scoped>
  .navHeader {
    display: flex;
    height: 50px;
    background-color: rgb(24, 126, 255);
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0px;
    z-index: 10;

    .pageTitle {
      color: #fff;
      font-size: 20px;
      font-weight: bold;
    }

    ::v-deep .van-dropdown-menu__bar {
      border-radius: 10px;
      line-height: 15px;
      min-width: 130px;
      max-width: 180px;
      height: 25px;
    }
    ::v-deep .van-dropdown-menu__title {
      padding: 5px 30px 5px 17px;
    }
    ::v-deep .van-dropdown-menu__title:after {
      right: 15px;
    }
    ::v-deep .van-cell__value {
      width: 50px;
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: auto;
    }
    ::v-deep .van-cell__title {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    ::v-deep .van-dropdown-item--down {
      top: 50px !important;
    }
    ::v-deep .van-popup--top {
      position: absolute;
    }
  }
</style>